<template>
  <f7-page>
    <f7-navbar title="发放列表" back-link="返回"></f7-navbar>
    <f7-block>
      <div class="float-left">
        <h3>本周</h3>
        <h5>发放￥{{models.cardListInfo.week_money}}</h5>
      </div>
      <div class="float-right gap-10">
        <myDatepicker @dtpkChange="timeValidity" :param="{type: 'day',format: 'YYYY.MM.DD'}" :date="startTime"></myDatepicker>
      </div>
    </f7-block>
    <div class="bg-white">
      <div class="list list-driver">
        <div class="item item-driver item-avatar item-icon-right" v-for="(item,index) in models.cardList" :key="index">
          <img :src="item.user_photo">
          <h3>
            {{item.user_name}}
          </h3>
          <h2 class="text-gray1">{{item.truck_num}} 载重{{item.truck_weight}}吨</h2>
          <h5 class="text-gray">{{item.time_creation}}</h5>
          <i class="icon">
            <h3>-{{item.money_remain}}</h3>
          </i>
        </div>
      </div>
    </div>
  </f7-page>
</template>

<script>
import myDatepicker from '../../components/datetimepicker'
import dateFmt from '../../filter/dateFmt'

export default {
  name: 'app',
  components: { myDatepicker },
  data () {
    return {
      startTime: { time: dateFmt.dataFmt_fmt1(new Date(), 'yyyy.MM.dd') },
      models: {
        cardListInfo: {
          week_money: ''
        },
        searchRedTime: new Date(),
        cardList: [],
      },
    }
  },
  methods: {
    timeValidity (data) {
      this.startTime = data
    },
    async getRedCardList () {
      let params = this.$f7Route.params;
      let param = {
        card_id: params.id,
        search_time: this.models.searchRedTime
      }
      if (params.id) {
        let getRedCardListRep = await this.LineService.getRedCardList(param)
        if (getRedCardListRep.data.status === 'success') {
          this.models.cardListInfo = getRedCardListRep.data.data
          this.models.cardList = getRedCardListRep.data.data.lists;
        } else {
          console.error('error', getRedCardListRep.data.data)
        }
      }
    }
  },
  mounted () {
    this.getRedCardList()
    // this.card_id = this.$f7Route.params.id

  }
}
</script>

<style scoped>
.ios .block {
  margin: 15px 0;
}
</style>
